<template>
	<!-- 背景 -->
	<div style="position: fixed; height: 100%; width: 100%; background-color: #00CCFF;">
		<div
			style="display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; margin-top: 130px;">
			<!-- 标题 -->
			<h3 style="color: #EB7347; opacity: 0.75; font-size: 20px; margin-top: 30px;">商家后台管理</h3>
			<!-- 登录表单 -->
			<van-form style="margin-top: 50px;">
				<van-field class="form-login" v-model="loginForm.phone" label="手机号" label-width="50px" placeholder="手机号"
					:rules="[{ required: true, message: '请填写手机号' }]" left-icon="phone" />
				<van-field class="form-login" v-model="loginForm.password" label="密码" label-width="50px"
					placeholder="密码" type="password" :rules="[{ required: true, message: '请填写密码' }]" left-icon="lock" />
				<div style="display: flex; justify-content: center; margin-top: 10px;">
					<van-button type="success" round style="width: 150px;" @click="onSubmit()"
						:disabled="loginForm.phone ==='' || loginForm.password ==='' ">登录</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//手机号和密码
				loginForm: {
					phone: '18977714410',
					password: '123'
				}
			}
		},
		methods: {
			onSubmit() {
				let _this = this;
				_this.$axios({
					method: 'post',
					url: '/seller/login',
					data: {
						phone: _this.loginForm.phone,
						password: _this.$rsaEncrypt(_this.loginForm.password)
					}
				}).then((resp) => {
					if (resp.code == 200) {
						_this.$notify({
							type: "success",
							message: resp.msg
						})
						//保存用户；1s为1秒，1min为1分钟，1h为1小时，1d为1天，字符均忽略大小写
						_this.$cookies.set("seller", resp.data, "3d")
						_this.$router.replace('/home')
					}
					if (resp.code == 500) {
						_this.$notify({
							type: "warning",
							message: resp.msg
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.form-login {
		border-bottom: solid;
		border-bottom-color: #14fff8;
	}
</style>
